
// src/pages/Settings/Settings.tsx
import React, { useState } from 'react';
import {
  Card,
  Form,
  Input,
  Button,
  Switch,
  Select,
  Divider,
  message,
  Space,
  Tabs,
} from 'antd';
import {
  SaveOutlined,
  ReloadOutlined,
  ApiOutlined,
  BellOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { useUIStore } from '../../stores/uiStore';

const Settings: React.FC = () => {
  const { theme, setTheme } = useUIStore();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSave = async (values: any) => {
    setLoading(true);
    try {
      // 保存设置到后端或本地存储
      console.log('Settings saved:', values);
      message.success('设置已保存');
    } catch (error) {
      message.error('保存失败');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    form.resetFields();
    message.info('设置已重置');
  };

  const tabItems = [
    {
      key: 'general',
      label: (
        <span>
          <SettingOutlined />
          常规设置
        </span>
      ),
      children: (
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
          initialValues={{
            theme: theme,
            language: 'zh-CN',
            autoRefresh: true,
            refreshInterval: 5,
          }}
        >
          <Form.Item label="主题" name="theme">
            <Select onChange={(value) => setTheme(value as 'light' | 'dark')}>
              <Select.Option value="light">亮色</Select.Option>
              <Select.Option value="dark">暗色</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="语言" name="language">
            <Select>
              <Select.Option value="zh-CN">简体中文</Select.Option>
              <Select.Option value="en-US">English</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="自动刷新" name="autoRefresh" valuePropName="checked">
            <Switch />
          </Form.Item>

          <Form.Item label="刷新间隔（秒）" name="refreshInterval">
            <Input type="number" min={3} max={60} />
          </Form.Item>

          <Divider />

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" icon={<SaveOutlined />} loading={loading}>
                保存设置
              </Button>
              <Button icon={<ReloadOutlined />} onClick={handleReset}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: 'connection',
      label: (
        <span>
          <ApiOutlined />
          连接设置
        </span>
      ),
      children: (
        <Form layout="vertical">
          <Form.Item label="API 基础 URL" name="apiBaseUrl">
            <Input placeholder="http://localhost:8080" />
          </Form.Item>

          <Form.Item label="连接超时（秒）" name="timeout">
            <Input type="number" min={5} max={120} />
          </Form.Item>

          <Form.Item label="启用 WebSocket" name="enableWebSocket" valuePropName="checked">
            <Switch defaultChecked />
          </Form.Item>
        </Form>
      ),
    },
    {
      key: 'notification',
      label: (
        <span>
          <BellOutlined />
          通知设置
        </span>
      ),
      children: (
        <Form layout="vertical">
          <Form.Item
            label="启用系统通知"
            name="enableNotifications"
            valuePropName="checked"
          >
            <Switch defaultChecked />
          </Form.Item>

          <Form.Item
            label="虚拟机状态变化通知"
            name="notifyStateChange"
            valuePropName="checked"
          >
            <Switch defaultChecked />
          </Form.Item>

          <Form.Item
            label="错误通知"
            name="notifyErrors"
            valuePropName="checked"
          >
            <Switch defaultChecked />
          </Form.Item>
        </Form>
      ),
    },
  ];

  return (
    <div>
      <Card title="系统设置">
        <Tabs items={tabItems} />
      </Card>
    </div>
  );
};

export default Settings;